<template>
    <div class="login-wrap">
        <div class="main">
            <div class="biao">茂名智慧工地平台</div>
            <el-form class="cont" :model="param" :rules="rules" ref="login" label-width="0px">
                <div class="zhanghao">
                    <div class="cell"><img style="width: 50px" src="../../assets/img/111.png" alt="" /></div>
                    <el-form-item prop="username">
                        <el-input class="example" id="user" v-model="param.username" placeholder="  请输入账号"></el-input>
                    </el-form-item>
                </div>
                <div class="zhanghao1">
                    <div class="cell1"><img style="width: 50px" src="../../assets/img/112.png" alt="" /></div>
                    <el-form-item prop="password">
                        <el-input
                            class="example"
                            id="user1"
                            type="password"
                            placeholder="  请输入密码"
                            v-model="param.password"
                            @keyup.enter.native="submitForm()"
                        ></el-input>
                    </el-form-item>
                </div>

                <div class="denglu">
                    <div @click="submitForm()">立即登录</div>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'; // Secondary package based on el-pagination
import $ from 'jquery';
import waves from '@/directive/waves';
import ajax from '@/utils/myajax';
export default {
    components: { Pagination },
    directives: { waves },
    data() {
        return {
            param: {
                username: '',
                password: ''
            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
            }
        };
    },
    methods: {
        //  getkpi() {

        //     $.ajax({
        //         type: 'POST',
        //         url: 'https://open.ys7.com/api/lapp/token/get',
        //         data: 'appKey=38239c7ee6154ca8bb0d935db0af1cf0&appSecret=55911269474d72b664d205d6c56464ba',
        //         dataType: 'JSON',
        //         // Content-Type: 'application/x-www-form-urlencoded',
        //         error: function () {
        //             alert('网络错误');
        //         },
        //         success: function (res) {
        //             // var vidiotoken = res.data.accessToken;
        //             localStorage.setItem('vidiotoken', res.data.accessToken);
        //             alert(1)
        //         }
        //     });
        // },
        //在登录页面发送请求（跟表单验证相结合）
        submitForm() {
            //先清除之前的缓存
            localStorage.clear();
            //表单验证  通过发送请求 否则不发送请求
            this.$refs['login'].validate((valid) => {
                if (valid) {
                    var me = this;
                    ajax('login/LoginPcD', this.param, function (data) {
                        me.$message({
                            title: '成功',
                            message: data.message,
                            type: 'success',
                            duration: 2000
                        });
                        console.log(data.message, 111);
                        if (data.message == '登录成功!') {
                            localStorage.setItem('section_id', data.data.section_id);
                            localStorage.setItem('section_name', data.data.section_name);
                            localStorage.setItem('username', data.data.username);
                            localStorage.setItem('token', data.token);
                            sessionStorage.setItem('username1', 1);
                            me.$router.push({ path: '/' });
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        regist() {
            this.$router.push({ path: '/regist' });
            console.log(11);
        }
    },
    mounted() {
        // this.getkpi();
    }
};
</script>

<style scoped>
.example >>> .el-input__inner {
    height: 58px;
    width: 100%;
    border: none;
    /* outline: none; */
    font-size: 20px;
}

.login-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background: url(https://jjjt.oss-cn-shanghai.aliyuncs.com/lankao/dengl.png) no-repeat;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tit {
    position: absolute;
    width: 247px;
    height: 28px;
    font-size: 30px;
    font-family: HYLingXinJ;
    font-weight: 600;
    color: rgba(17, 17, 17, 1);
    left: 53px;
    top: 29px;
}
.main {
    width: 745px;
    height: 800px;
    /* background:rgba(255,255,255,0.5); */
    /* box-shadow:0px 16px 12px 1px rgba(0, 0, 0, 0.32);

border-radius:10px; */
}
.biao {
    display: flex;
    justify-content: center;

    width: 772px;
    height: 40px;
    opacity: 1;
    font-size: 40px;
    font-family: Adobe Heiti Std, Adobe Heiti Std-R;
    font-weight: R;
    text-align: left;
    color: #28e1f0;
    letter-spacing: 3px;
    margin-top: 30px;
}
.cont {
    width: 745px;
    height: 300px;
    /* background: yellowgreen; */
    margin-top: 50px;
}
.zhanghao {
    margin-top: 210px;
    width: 745px;
    height: 58px;
    display: flex;
    justify-content: center;
    position: relative;

    /* background: #fff; */
}
/* .zhanghao .el-input{
    background:rgba(255,255,255,1);
box-shadow:0px 4px 13px 0px rgba(0, 0, 0, 0.22);
border-radius:3px;
} */
.zhanghao1 {
    margin-top: 40px;
    width: 745px;
    height: 58px;
    display: flex;
    justify-content: center;
    position: relative;
}
.cell {
    position: absolute;
    width: 40px;
    height: 40px;
    left: 70px;
    top: 9px;
}
.cell1 {
    position: absolute;
    width: 35px;
    height: 38px;
    left: 70px;
    top: 9px;
}
#user {
    width: 422px;
    height: 56px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    color: rgba(17, 17, 17, 1);
}
#user1 {
    width: 422px;
    height: 56px;
    color: rgba(17, 17, 17, 1);
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
}
.denglu {
    margin-top: 40px;
    width: 745px;
    height: 43px;
    display: flex;
    justify-content: center;
    /* background: #28e1f0; */
}
.denglu div {
    width: 480px;
    height: 60px;
    background: #28e1f0;
    border-radius: 6px;
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}
</style>